<template>
  <el-row style="margin-top: 12px">
    <el-col :span="8">
      <div class="sub-title my-2 text-sm text-gray-600">
        Please input your control database:
      </div>
    </el-col>
    <el-col :span="16">
      <el-autocomplete
          v-model="state1"
          :fetch-suggestions="querySearch"
          clearable
          class="inline-input w-50"
          placeholder="Please Input"
          @select="handleSelect"
      />
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import {onMounted, ref} from 'vue'
import {databaseSessionKey} from "@/util/common";

interface RestaurantItem {
  value: string
  link: string
}

const state1 = ref('')

const restaurants = ref<RestaurantItem[]>([])
const querySearch = (queryString: string, cb: any) => {
  const results = queryString
      ? restaurants.value.filter(createFilter(queryString))
      : restaurants.value
  cb(results)
}
const createFilter = (queryString: string) => {
  return (restaurant: RestaurantItem) => {
    return (
        restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
    )
  }
}
const loadAll = () => {
  const dbJson: string | null = localStorage.getItem(databaseSessionKey)
  return dbJson !== null ? JSON.parse(dbJson) : [];
}

const handleSelect = (item: RestaurantItem) => {
  console.log(item)
}

onMounted(() => {
  restaurants.value = loadAll()
})

</script>

<style scoped>

</style>
